import React, { PureComponent } from 'react'
import { connect } from 'dva'

import classNames from 'classnames';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Row, Col, Card, Timeline, Avatar, Button, Icon } from 'antd'

import PageHeaderWrapper from '@/components/PageHeaderWrapper'

import styles from './Workplace.less'

@connect(({ user }) => ({
  currentUser: user.currentUser,
}))
class Workplace extends PureComponent {
  render() {
    const { currentUser = {} } = this.props
    const pageHeaderContent = (
      <div className={styles.pageHeaderContent}>
        <div className={styles.avatar}>
          <Avatar size="large" src={currentUser.avatar} className="App-logo" />
          <div className={classNames(styles.twinkle, 'twinkle')} />
        </div>
        <div className={classNames(styles.content, 'motto-backwards')}>
          <div className={classNames(styles.contentTitle, 'item1')}>
              Hello，
              {currentUser.name ? currentUser.name : '那谁谁'}
              {/*，祝你开心每一天！*/}
          </div>
          <div className="item2">
              <strong className="item3">By：</strong>小栈
          </div>
        </div>
      </div>
    )

    return (
      <PageHeaderWrapper
        content={pageHeaderContent}
      >
        <Col xl={16} lg={24} md={24} sm={24} xs={24}>
          <Card
            bordered={false}
            title="动态"
          >
            <OverPack playScale={0.1}>
              <QueueAnim
                type={['bottom', 'top']}
                key="Timeline"
                leaveReverse
                delay={[0, 1000]}
                component={Timeline}
              >
                <Timeline.Item key="1" dot={<Icon type="clock-circle-o" style={{ fontSize: 16 }} />}> 初始化{/*七牛云存储 CDN*/}</Timeline.Item>
                <Timeline.Item key="2" dot={<Icon type="clock-circle-o" style={{ fontSize: 16 }} />}> 初始化{/*SQL读写分离及定时器*/}</Timeline.Item>
                <Timeline.Item key="3" color="green">初始化{/*增加 Redis高速缓存*/}</Timeline.Item>
                <Timeline.Item key="4" color="red">初始化{/*增加服务器剪裁上传及水印*/}</Timeline.Item>
                <Timeline.Item key="5"><p>初始化</p></Timeline.Item>
              </QueueAnim>
            </OverPack>
          </Card>
        </Col>
      </PageHeaderWrapper>
    )
  }
}

export default Workplace